
<template>
  <div class="f f-col h100 rel">
    <!-- 状态 -->
    <van-tree-select
        height="100%"
        :items="items"
        @click-nav="clickLeft($event)"
        :main-active-index.sync="activeIndex"
      >
        <template slot="content">
          <div v-if="activeIndex === 0" style="padding-bottom:3rem;">
            <div v-for="(item,index) in 3" :key="index">
              <div class="p15 p-l-0 f">
                <div class="bg round o-hide" style="width:1.5rem;min-width:1.5rem;height:1.5rem">
                  <!-- <img class="w100 h100 img-cover" src="../../../static/img/c1.jpg"> -->
                </div>
                <div class="w100 pl10 pr10 rel">
                  <p class="f14">农家一碗香</p>
                  <div class="mt15 f j-b">
                    <em class="c2 b">￥16</em>
                  </div>
                  <div class="abs p0 round m-l round" style="right:0;bottom:0;">
                    <van-button type="primary" size="small" round>热售</van-button>
                  </div>
                </div>
              </div>
              <div class="van-hairline--bottom"></div>
            </div>
            <div class="p15 p-l-0 f">
              <div class="bg round o-hide" style="width:1.5rem;min-width:1.5rem;height:1.5rem">
                <!-- <img class="w100 h100 img-cover" src="../../../static/img/c1.jpg"> -->
              </div>
              <div class="w100 pl10 pr10 rel">
                <p class="f14">农家一碗香</p>
                <div class="mt15 f j-b">
                  <em class="c2 b">￥16</em>
                </div>
                <div class="abs p0 round m-l round" style="right:0;bottom:0;">
                  <van-button type="warning" size="small" round>售罄</van-button>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="pt20 pb20" style="padding-bottom:3rem;">
            <van-skeleton title="" :row="8"/>
          </div>
        </template>
      </van-tree-select>


    <!-- 分类 -->
    <div
      class="pl10 pr10 h100 scroll bg"
      style="padding-bottom:3rem;"
      v-if="active === 1 && items.length>0"
    >
      <div
        class="bg-white p15 round f14 f j-b a-c mt10"
        v-for="(item,index) in items"
        :key="index"
        @click="editTypeList(item)"
        v-if="items.length>0"
      >
        <div>
          <p class="pt5 pb5">{{item.text}}</p>
        </div>
        <div>
          <van-icon class="c999" name="arrow"/>
        </div>
      </div>
      <van-empty v-else description="描述文字"></van-empty>
    </div>


    <div
      v-if="active === 1 && items.length===0"
      class="pl10 pr10 h100 scroll"
      style="padding-bottom:3rem;"
    >
      <van-empty description="暂无分类"></van-empty>
    </div>


    <!-- 商品 -->
    <div class="scroll h100" v-if="active === 2 && items.length>0">
      <van-tree-select
        height="100%"
        :items="items"
        @click-nav="clickLeft($event)"
        :main-active-index.sync="activeIndex"
      >
        <template class="" slot="content">
          <div v-if="activeIndex === 0" style="padding-bottom:3rem;">
            <div v-for="(item,index) in goodsList" :key="index" @click="optionmenuData.show = true">
              <div class="p15 p-l-0 f">
                <div class="bg round o-hide" style="width:1.5rem;min-width:1.5rem;height:1.5rem">
                  <!-- <img class="w100 h100 img-cover" src="../../../static/img/c1.jpg"> -->
                </div>
                <div class="w100 pl10 pr10 rel">
                  <p class="f14">农家一碗香</p>
                  <div class="mt15 f j-b">
                    <em class="c2 b">￥16</em>
                  </div>
                  <div class="abs p0 round ml5 round" style="right:0;bottom:15px;">
                    <van-icon class="c999" name="arrow"/>
                  </div>
                </div>
              </div>
              <div class="van-hairline--bottom"></div>
            </div>
          </div>
          <div v-else class="pt20 pb20" style="padding-bottom:3rem;">
            <van-skeleton title="" :row="8"/>
          </div>
        </template>
      </van-tree-select>
    </div>


    <div
      v-if="active === 2 && items.length===0"
      class="pl10 pr10 h100 scroll"
      style="padding-bottom:3rem;"
    >
      <van-empty description="请先添加商品分类"></van-empty>
    </div>






    <option-menu
      :show="optionmenuData.show"
      :type="optionmenuData.type"
      :title="optionmenuData.title"
      :buttons="optionmenuData.buttons"
      :animation="optionmenuData.animation"
      @func="getMsgFormSon"
    />


  </div>
</template>

<script>
import OptionMenu from "./../../components/optionmenu";
import {
  goodsAdd,
  goodUpdate,
  goodsTypesList,
  goodsTypesAdd,
  goodsTypesUpdate,
  goodsTypesDelete,
  goodsList,
  specList,
  specAdd,
  specUpdate
} from "@/http/api";
export default {
  data() {
    return {
      goodsList: [],

      show: {
        openDiang0:true,
        openDiang1: false,
        openDiang2: false,
        openDiang3: false
      },
      active: 0,

      form1: {
        name: ""
      },

      form2: {},
      form3: {
        childList: []
      },
      form4:{},

      // 主菜单切换
      activeIndex: 0,
      items: [],

      open: false,

      optionmenuData: {
        show: false,
        type: null,
        title: null,
        buttons: null,
        animation: null
      },

      // 编辑中
      thisGoodItem:{},
      thisTypeItem: {},
      thisSpecItem: {}
    };
  },

  components: {
    OptionMenu
  },

  created() {
    this.getGoodsTypesList(); //分类列表
    this.geGoodsList(); //商品列表
    this.getSpecList(); //规格列表
  },

  methods: {
    clickLeft(e) {
      this.activeIndex = e;
    },
    getMsgFormSon(data) {
      this.optionmenuData.show = false;
      if (data.type === "分类" && data.item == "修改") {
        this.form1.name = this.thisTypeItem.text;
        this.form1.id = this.thisTypeItem.id;
        this.show.openDiang1 = true;
        console.log(this.form1);
      }

      if (data.type === "分类" && data.item == "删除") {
        this.form1.name = this.thisTypeItem.text;
        this.form1.id = this.thisTypeItem.id;
        goodsTypesDelete(this.form1).then(res => {
          if (res.code === 200) {
            this.getGoodsTypesList();
          }
        });
      }

      if (data.type === "规格" && data.item == "修改") {
        //this.form3.name = this.thisTypeItem.text;
        this.form3 = this.thisSpecItem;
        console.log(this.form3);
        this.show.openDiang3 = true;
        // specUpdate(this.form3).then(res => {
        //   if (res.code === 200) {
        //     this.getSpecList();
        //   }
        // });
      }
    },

    add(num) {
      if (num === 1) {
        this.form1.name = "";
        this.form1.id = "";
        this.show.openDiang1 = true;
      }
      if (num === 2) {
        // this.form1.name = "";
        // this.form1.id = "";
        this.show.openDiang2 = true;
      }

      if (num === 3) {
        // this.form1.name = "";
        // this.form1.id = "";
        this.thisSpecItem = {};
        this.show.openDiang3 = true;
      }
    },
    //添加和删除规格选项
    addspec() {
      const obj = {};
      obj.name = "";
      obj.price = "";
      this.form3.childList.push(obj);
    },
    delectspec() {},


    // 新增保存分类
    saveList(id) {
      if (!this.form1.name) {
        this.Toast.warning({
          iconUrl: "../../../static/img/logo.png",
          position: "topCenter",
          message: "请输入分类名称"
        });
        return;
      }
      if (id) {
        goodsTypesUpdate(this.form1).then(res => {
          if (res.code === 200) {
            this.show.openDiang1 = false;
            this.getGoodsTypesList();
          }
        });
      } else {
        goodsTypesAdd(this.form1).then(res => {
          if (res.code === 200) {
            this.show.openDiang1 = false;
            this.getGoodsTypesList();
          }
        });
      }
    },


    // 新增/保存规格
    saveSpec(id) {
      let list = [];
      this.form3.childList.map(item => {
        let obj = {};
        obj.childName = item.name;
        obj.childPrice = item.price;
        obj.id = item.id;
        list.push(obj);
      });
      const data = {
        parentName: this.form3.name,
        list: list
      };
      if (id) {
        specUpdate(data).then(res => {
          if (res.code === 200) {
            this.show.openDiang3 = false;
            this.getSpecList();
          }
        });
      } else {
        specAdd(data).then(res => {
          if (res.code === 200) {
            this.show.openDiang3 = false;
            this.getSpecList();
          }
        });
      }
    },

     // 新增/保存商品
    saveGood(id) {
      if (id) {
        goodUpdate(this.form3).then(res => {
          if (res.code === 200) {
            this.show.openDiang3 = false;
            this.getSpecList();
          }
        });
      } else {
        goodsAdd(this.form3).then(res => {
          if (res.code === 200) {
            this.show.openDiang3 = false;
            this.getSpecList();
          }
        });
      }
    },



    

    // 弹出操作项
    editTypeList(item) {
      this.optionmenuData.type = "分类";
      this.optionmenuData.title = "标题";
      this.optionmenuData.buttons = ["修改", "删除"];
      this.optionmenuData.animation = "flipInX";
      this.optionmenuData.show = true;
      this.thisTypeItem = item;
    },
    editSpecList(item) {
      this.optionmenuData.type = "规格";
      this.optionmenuData.title = "编辑当前规格";
      this.optionmenuData.buttons = ["修改", "删除"];
      this.optionmenuData.animation = "flipInX";
      this.optionmenuData.show = true;
      this.thisSpecItem = item;
    },

    // 分类列表
    getGoodsTypesList() {
      goodsTypesList().then(res => {
        if (res.code === 200) {
          this.items = [];
          res.result.map((item, index) => {
            this.items.push({ text: item.name, id: item.id, seq: item.seq });
          });
        }
      });
    },

    // 商品列表
    geGoodsList() {
      goodsList().then(res => {
        if (res.code === 200) {
          this.goodsList = [];
          this.goodsList = res.result;
        }
      });
    },

    // 规格列表
    getSpecList() {
      specList().then(res => {
        if (res.code === 200) {
          this.specList = [];
          this.specList = res.result;
        }
      });
    },

    
  }
};
</script>
